<template>
  <div class="banner-quicklinks">
    <div class="quick-links__nav__prev" v-show="showPrev" @click="scrollPrev"></div>
    <div class="quick-links__wrapper" ref="quickLinksWrapperRef"  @scroll="onScroll">
      <div class="quick-links__list">
        <Button v-for="item in data" :key="item.id" :data="item" :hasHoverBg="false" @handleClick="handleClick"></Button>
      </div>
    </div>
    <div class="quick-links__nav__next" v-show="showNext" @click="scrollNext"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, nextTick, onUnmounted } from 'vue'
import type { PropType } from 'vue'
import type { ButtonProps } from '@/types/button'
import Button from '@/common/Button/index.vue' 

const props = defineProps({
  data: {
    type: Array as PropType<ButtonProps[]>,
    default: () => []
  }
})

const emit = defineEmits(['handleClick'])

const handleClick = (url: string) => {
  emit('handleClick', url)
}

const quickLinksWrapperRef = ref<HTMLDivElement | null>(null)
const showPrev = ref(false)
const showNext = ref(false)

const checkScroll = () => {
  const el = quickLinksWrapperRef.value
  if (!el) return
  showPrev.value = el.scrollLeft > 0
  showNext.value = el.scrollLeft + el.clientWidth < el.scrollWidth
}

const scrollPrev = () => {
  const el = quickLinksWrapperRef.value
  if (!el) return
  el.scrollBy({ left: -el.clientWidth / 1.5, behavior: 'smooth' })
}

const scrollNext = () => {
  const el = quickLinksWrapperRef.value
  if (!el) return
  el.scrollBy({ left: el.clientWidth / 1.5, behavior: 'smooth' })
}

const onScroll = () => {
  checkScroll()
}

watch(() => props.data, async () => {
  await nextTick()
  checkScroll()
})

onMounted(() => {
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', checkScroll)
  }
  nextTick(checkScroll)
})

onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', checkScroll)
  }
})
</script>

<style lang="scss" scoped>
.banner-quicklinks {
  position: relative;
  width: 100%;
  height: 44px;
  background: #0a1f8f;
}

@media (max-width: 767.98px) {
  .banner-quicklinks {
    height: 41px;
  }
}

.banner-quicklinks .quick-links__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #0a1f8f;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-color: transparent;
  scrollbar-width: none;
}

.banner-quicklinks .quick-links__list {
  display: flex;
}

.banner-quicklinks .quick-links__nav__next,
.banner-quicklinks .quick-links__nav__prev {
  position: absolute;
  width: 33px;
  height: 100%;
  box-shadow: 0 4px 4px hsla(0,0%,100%,.2);
  background-color: #0032a0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}

@media (max-width: 1023.98px) {
  .banner-quicklinks .quick-links__nav__next,
  .banner-quicklinks .quick-links__nav__prev {
    width: 28px;
  }
}

@media (max-width: 767.98px) {
  .banner-quicklinks .quick-links__nav__next,
  .banner-quicklinks .quick-links__nav__prev {
    box-shadow: 0 4px 4px hsla(0,0%,100%,.2);
  }
}

.banner-quicklinks .quick-links__nav__next:after,
.banner-quicklinks .quick-links__nav__prev:after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0,0%,100%,0);
}

@media (max-width: 1023.98px) {
  .banner-quicklinks .quick-links__nav__next:after,
  .banner-quicklinks .quick-links__nav__prev:after {
    width: 14px;
    height: 14px;
  }
}

.banner-quicklinks .quick-links__nav__prev {
  left: -1px;
}

.banner-quicklinks .quick-links__nav__prev:after {
  transform: scale(-1);
}

.banner-quicklinks .quick-links__nav__next {
  right: -1px;
}

:deep(.button-primary) {
  background: transparent;
}
</style>